<template>
<div>
    <transition mode="out-in">
        <router-view></router-view>
    </transition>

    <!--底部导航-->
    <nav class="nav-tabBar viewport">
        <router-link class="item home" to="/">
        </router-link>
        <router-link class="item navtab" to="navtab">
        </router-link>
        <router-link class="item shopcart" to="shopcart">
        </router-link>
        <router-link class="item personal" to="personal">
        </router-link>
    </nav>
</div>
</template>
<script>
export default {
  name: 'home',
  data () {
    return {
    }
  },
  created(){

  },
  components:{
  }
}
</script>
<style scoped>

/* 这是底部导航的样式 */
.nav-tabBar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    z-index: 1000;
    background: #FFFFFF;
    box-shadow: 0 -1px 16px 0 rgba(0, 0, 0, 0.06);
}
.item{
    width: 23%;
    height: 100%;
    display: inline-block;
    background-position-x: 0px !important;
    background-position-y: -100px !important;
}
.home{
    background: url(../../../assets/img/icon-home.png) no-repeat;
}
.navtab{
    background: url(../../../assets/img/icon-navtab.png) no-repeat;
}
.shopcart{
    background: url(../../../assets/img/icon-shopcart.png) no-repeat;
}
.personal{
    background: url(../../../assets/img/icon-personal.png) no-repeat;
}

.router-link-exact-active{
    background-position-y: 0px !important;
}
</style>
